<template>
  <div class="detail">
    <el-drawer
      :visible.sync="drawer"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      direction="rtl"
      title="客户详情"
      size="1000px"
      @close="handleClose"
    >
      <div class="user_info">
        <div class="top">
          <div class="left">
            <svg-icon class="photo" icon-class="userphoto" />
            <span class="r_photo">
              <span class="user_name">  {{ cusInfo.name }}</span><span class="type_style"> {{ cusInfo.type }}</span>
              <svg-icon
                style="cursor: pointer; margin-left: 16px; font-size: 22px;"
                :icon-class="cusInfo.is_focused ? 's_star' : 'k_star'"
                @click="clickFocuesd(cusInfo.is_focused = !cusInfo.is_focused )"
              />
            </span>
          </div>
          <div class="right">
            <el-button
              size="mini"
              @click.native="exportCusMsg"
            >导出PDF</el-button>
            <el-button size="mini">呼叫电话</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="addFollowLog"
            >添加记录</el-button>
          </div>
        </div>
        <div class="bottom">
          <div class="b_content">
            <div class="b_title">申请金额(万)</div>
            <div class="b_info">
              {{ cusInfo.required_load_amount || "-" }}
            </div>
          </div>
          <div class="b_content">
            <div class="b_title">客户状态</div>
            <div class="b_info">{{ cusInfo.status_display || "-" }}</div>
          </div>
          <div class="b_content">
            <div class="b_title">客户级别</div>
            <div class="b_info">
              <span>{{ cusInfo.star || "-" }}</span>
            </div>
          </div>
          <div class="b_content">
            <div class="b_title">客户归属人</div>
            <div class="b_info">{{ cusInfo.owner_username || "-" }}</div>
          </div>
          <div class="b_content">
            <div class="b_title">上次更进</div>
            <div class="b_info">{{ cusInfo.update_datetime || "-" }}</div>
          </div>
          <div class="b_content">
            <div class="b_title">创建时间</div>
            <div class="b_info">{{ cusInfo.create_datetime || "-" }}</div>
          </div>
        </div>
      </div>
      <div class="user_content">
        <div ref="mySelect" :style="{ '--left': left }" class="bar">
          {{ navText }}
        </div>
        <div class="cus_tabar">
          <div
            v-for="item in tarlist"
            :key="item.value"
            class="tabar_info"
            @click="handleClick(item.value)"
          >{{ item.label }}</div>

        </div>
        <div class="detail_content">
          <!-- 客户信息 -->
          <el-tabs v-if="tabarIndex=== 'first'" v-model="userActive" class="scp_style" @tab-click="handleCusClick">
            <el-tab-pane label="个人信息" name="one">
              <div class="info">
                <span class="info_btns">
                  <span class="info_title">基本信息</span>
                  <span>
                    <el-button v-if="isEdit" type="primary" size="mini" @click="editUserinfo()">编辑</el-button>
                    <el-button v-if="!isEdit" type="primary" size="mini" @click="handleKhBtn()">保存</el-button>
                    <el-button v-if="!isEdit" type="info" size="mini" @click="cancelEditUserinfo()">取消</el-button>
                  </span>
                </span>
                <table class="name-style">
                  <tr>
                    <td class="name-title">  年龄</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.birth_year || "-" }}</td>
                    <td v-else class="name-info"><el-input-number v-model=" sysList.birth_year" :min="1" :max="120" controls-position="right" size="mini" placeholder="请输入内容" /></td>
                    <td class="name-title bg"> 性别</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.gender }}</td>
                    <td v-else class="name-info">
                      <el-select v-model="sysList.gender" size="mini" placeholder="请选择">
                        <el-option
                          v-for="item in genderList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </td>
                    <td class="name-title">身份证号</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.id_number ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-input v-model="sysList.id_number" style="width:100%" size="mini" placeholder="请输入内容" @keyup.native="sysList.id_number=sysList.id_number.replace(/[^0-9]/g,'')" />
                    </td>
                  </tr>
                  <tr class="bg">
                    <td class="name-title">户籍</td>
                    <td v-if="isEdit" colspan="" class="name-info">{{ sysList.residence_display ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-cascader
                        v-model="sysList.residence"
                        :options="areaList"
                        size="mini"
                      />
                    </td>
                    <td class="name-title bg">邮箱</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.email ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-input
                        v-model="sysList.email"
                        size="mini"
                        placeholder="请输入内容"
                      />
                    </td>
                    <td class="name-title bg"> 联系电话</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.tel ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-input v-model="sysList.tel" size="mini" placeholder="请输入内容" @keyup.native="sysList.tel=sysList.tel.replace(/[^0-9]/g,'')" />
                    </td>
                  </tr>
                  <tr>
                    <td class="name-title">单位</td>
                    <td v-if="isEdit" colspan="5" class="name-info">{{ sysList.work_unit ||"-" }}</td>
                    <td v-else colspan="3" class="name-info"><el-input v-model="sysList.work_unit" size="mini" placeholder="请输入内容" /></td>
                  </tr>
                  <tr class="bg">
                    <td class="name-title bg">职业</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.profession_category_display ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-select v-model="sysList.profession_category" size="mini" placeholder="请选择">
                        <el-option
                          v-for="dict in professionList"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                    </td>
                    <td class="name-title bg">所属行业</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.industry_display ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-select v-model="sysList.industry" size="mini" placeholder="请选择">
                        <el-option
                          v-for="dict in industryList"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                    </td>
                    <td class="name-title bg">入职日期</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.hiredate || '-' }}</td>
                    <td v-else class="name-info">
                      <el-date-picker
                        v-model="sysList.hiredate"
                        size="mini"
                        type="date"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width:100%"
                      >
                      </el-date-picker>
                    </td>
                  </tr>
                  <tr>
                    <td class="name-title">发薪方式</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.pay_method_display ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-select v-model="sysList.pay_method" size="mini" placeholder="请选择">
                        <el-option
                          v-for="dict in payList"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                    </td>
                    <td class="name-title">社保基数(元)</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.social_security_base || "-" }}</td>
                    <td v-else class="name-info">
                      <el-input v-model="sysList.social_security_base" style="width:100%" size="mini" placeholder="请输入内容" @keyup.native="sysList.social_security_base=sysList.social_security_base.replace(/[^\d.]/g,'')" />
                    </td>
                    <td class="name-title">公积金月缴(元)</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.amount_of_housing_fund ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-input v-model="sysList.amount_of_housing_fund" style="width:100%" size="mini" placeholder="请输入内容" @keyup.native="sysList.amount_of_housing_fund=sysList.amount_of_housing_fund.replace(/[^\d.]/g,'')" />
                    </td>
                  </tr>
                  <tr class="bg">
                    <td class="name-title bg">婚姻状况</td>
                    <td v-if="isEdit" colspan="3" class="name-info">{{ sysList.marital_status ||"-" }}</td>
                    <td v-else class="name-info" colspan="3">
                      <el-radio-group v-model="sysList.marital_status">
                        <el-radio v-for="item in ldlist" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                      </el-radio-group>
                    </td>
                    <td class="name-title">个人年流水(元)</td>
                    <td v-if="isEdit" class="name-info">{{ sysList.personal_annual_flow ||"-" }}</td>
                    <td v-else class="name-info">
                      <el-input v-model="sysList.personal_annual_flow" style="width:100%" size="mini" placeholder="请输入内容" @keyup.native="sysList.amount_of_housing_fund=sysList.amount_of_housing_fund.replace(/[^\d.]/g,'')" />
                    </td>
                  </tr>
                  <template v-if="sysList.marital_status ==='已婚'">
                    <tr>
                      <td class="name-title ">配偶姓名</td>
                      <td v-if="isEdit" class="name-info">{{ sysList.spouse_name ||"-" }}</td>
                      <td v-else class="name-info"><el-input v-model=" sysList.spouse_name" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">配偶年龄</td>
                      <td v-if="isEdit" class="name-info">{{ sysList.spouse_birth_year || "-" }}</td>
                      <td v-else class="name-info"><el-input-number v-model=" sysList.spouse_birth_year" :min="1" :max="120" controls-position="right" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">配偶户籍</td>
                      <td v-if="isEdit" class="name-info">{{ sysList.spouse_residence_display ||"-" }}</td>
                      <td v-else class="name-info">
                        <el-cascader
                          v-model="sysList.spouse_residence"
                          :options="areaList"
                          size="mini"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">配偶年流水(元)</td>
                      <td v-if="isEdit" class="name-info">{{ sysList.spouse_annual_flow ||"-" }}</td>
                      <td v-else class="name-info">
                        <el-input v-model="sysList.spouse_annual_flow" style="width:100%" size="mini" placeholder="请输入内容" @keyup.native="sysList.spouse_annual_flow=sysList.spouse_annual_flow.replace(/[^\d.]/g,'')" />
                      </td>
                      <td class="name-title">配偶身份证号</td>
                      <td v-if="isEdit" class="name-info">{{ sysList.spouse_id_number ||"-" }}</td>
                      <td v-else class="name-info">
                        <el-input v-model="sysList.spouse_id_number" style="width:100%" size="mini" placeholder="请输入内容" @keyup.native="sysList.spouse_id_number=sysList.spouse_id_number.replace(/[^0-9]/g,'')" />
                      </td>
                      <td class="name-title bg">配偶联系电话</td>
                      <td v-if="isEdit" class="name-info">{{ sysList.spouse_phone ||"-" }}</td>
                      <td v-else class="name-info">
                        <el-input v-model="sysList.spouse_phone" size="mini" placeholder="请输入内容" @keyup.native="sysList.spouse_phone=sysList.spouse_phone.replace(/[^0-9]/g,'')" />
                      </td>
                    </tr>
                    <tr class="bg">
                      <td class="name-title bg">配偶单位</td>
                      <td v-if="isEdit" colspan="5" class="name-info">{{ sysList.spouse_work_unit ||"-" }}</td>
                      <td v-else colspan="5" class="name-info"><el-input v-model="sysList.spouse_work_unit" size="mini" placeholder="请输入内容" /></td>
                    </tr>
                  </template>
                </table>
              </div>
              <div class="info">
                <span class="info_btns">
                  <span class="info_title">系统信息</span>
                  <span></span>
                </span>
                <table class="name-style">
                  <tr>
                    <td class="name-title">线索名称</td>
                    <td class="name-info">{{ cusInfo.clue_name || "-" }}</td>
                    <td class="name-title">线索来源</td>
                    <td class="name-info">{{ cusInfo.clue_source ||"-" }}</td>
                    <td class="name-title">客户来源 </td>
                    <td class="name-info">{{ cusInfo.source_display ||"-" }}</td>
                  </tr><tr style="height:80px">
                    <td class="name-title">备注</td>
                    <td colspan="5" class="name-info">{{ cusInfo.memo ||"-" }}</td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
            <el-tab-pane v-if="cusInfo.type === '企业客户' " label="关联企业" name="two">
              <div class="info">
                <span class="info_btns">
                  <span></span>
                  <span>
                    <el-button v-if="isDwEdit" type="primary" size="mini" @click="editDwinfo()">编辑</el-button>
                    <el-button v-if="!isDwEdit" type="primary" size="mini" @click="handleDwBtn()">保存</el-button>
                    <el-button v-if="!isDwEdit" type="info" size="mini" @click="cancelEditDwinfo()">取消</el-button>
                  </span>
                </span>
                <table class="name-style">
                  <tr>
                    <td class="name-title">单位名称</td>
                    <td v-if="isDwEdit" colspan="3" class="name-info">{{ workList.name || "-" }}</td>
                    <td v-else class="name-info" colspan="3"><el-input v-model="workList.name" size="mini" placeholder="请输入内容" /></td>
                    <td class="name-title">成立日期</td>
                    <td v-if="isDwEdit" class="name-info">{{ workList.establishment_time || "-" }}</td>
                    <td v-else class="name-info">
                      <el-date-picker
                        v-model=" workList.establishment_time "
                        size="mini"
                        style="width:100%"
                        type="date"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </td>
                  </tr>
                  <tr class="bg">
                    <td class="name-title bg">注册资本(万)</td>
                    <td v-if="isDwEdit" class="name-info">{{ workList.registered_capital || "-" }}</td>
                    <td v-else class="name-info"><el-input
                      v-model=" workList.registered_capital "
                      size="mini"
                      placeholder="请输入内容"
                      @keyup.native="workList.registered_capital=workList.registered_capital.replace(/[^\d.]/g,'')"
                    /></td>
                    <td class="name-title bg">占股比例(%)</td>
                    <td v-if="isDwEdit" class="name-info">{{ workList.share || "-" }}</td>
                    <td v-else class="name-info"><el-input
                      v-model=" workList.share "
                      size="mini"
                      placeholder="请输入内容"
                      @keyup.native="workList.share =workList.share .replace(/[^\d.]/g,'')"
                    /></td>
                    <td class="name-title bg">所属行业</td>
                    <td v-if="isDwEdit" class="name-info">{{ workList.industry || "-" }}</td>
                    <td v-else class="name-info">
                      <el-select v-model="workList.industry" size="mini" placeholder="请选择">
                        <el-option
                          v-for="dict in industryList"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="name-title">年开票(万)</td>
                    <td v-if="isDwEdit" class="name-info">{{ workList.annual_billing || "-" }}</td>
                    <td v-else class="name-info"><el-input v-model=" workList.annual_billing " size="mini" placeholder="请输入内容" /></td>
                    <td class="name-title">企业年流水(万)</td>
                    <td v-if="isDwEdit" colspan="3" class="name-info">{{ workList.enterprise_annual_flow || "-" }}</td>
                    <td v-else colspan="3" class="name-info">
                      <el-input
                        v-model=" workList.enterprise_annual_flow "
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="workList.enterprise_annual_flow =workList.enterprise_annual_flow .replace(/[^\d.]/g,'')"
                      /></td>
                  </tr>
                  <tr class="bg">
                    <td class="name-title bg">注册地址</td>
                    <td v-if="isDwEdit" colspan="5" class="name-info">{{ workList.registered_address || "-" }}</td>
                    <td v-else class="name-info" colspan="5"><el-input v-model=" workList.registered_address " size="mini" placeholder="请输入内容" /></td>
                  </tr>
                  <tr style="height:60px">
                    <td class="name-title">经营范围</td>
                    <td v-if="isDwEdit" colspan="5" class="name-info">{{ workList.business_scope || "-" }}</td>
                    <td v-else class="name-info" colspan="5"><el-input v-model=" workList.business_scope " type="textarea" size="mini" :rows="2" placeholder="请输入内容" /></td>
                  </tr>
                  <tr style="height:80px" class="bg">
                    <td class="name-title bg">备注</td>
                    <td v-if="isDwEdit" colspan="5" class="name-info">{{ workList.memo || "-" }}</td>
                    <td v-else class="name-info" colspan="5"><el-input v-model=" workList.memo " type="textarea" size="mini" :rows="3" placeholder="请输入内容" /></td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="固定资产" name="three">
              <div class="info">
                <div class="add_house">
                  <div class="info_btns" style="margin-top:6px">
                    <span></span>
                    <span>
                      <el-button v-if="!isShowHouse" size="mini" type="primary" style="margin-bottom:15px;" @click="isShowHouse = true;clearInfo();getBankList()">添加房产信息</el-button>
                      <el-button v-if="!isShowAuto" size="mini" type="primary" style="margin-bottom:15px;" @click="addAutoInfo">添加车产信息</el-button>
                    </span>
                  </div>
                  <table v-if="isShowAuto" style="margin-bottom:15px;border: 1px solid #DCDCDC;" class="name-style">
                    <tr>
                      <td class="bd" colspan="6">车产信息
                        <span class="fr">
                          <el-button type="primary" size="mini" @click="subAutoInfo()">保存</el-button>
                          <el-button type="info" size="mini" @click="canAutoInfo()">取消</el-button>
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">汽车品牌</td>
                      <td class="name-info"><el-input v-model="qCList.brand" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">汽车型号</td>
                      <td class="name-info"><el-input v-model="qCList.model" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">购买时间</td>
                      <td class="name-info">
                        <el-date-picker
                          v-model="qCList.purchase_time"
                          size="mini"
                          style="width:100%"
                          type="date"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">按揭状况</td>
                      <td class="name-info">
                        <el-input
                          v-model="qCList.mortgage_status"
                          size="mini"
                          placeholder="请输入内容"
                        />
                      </td>
                      <td class="name-title">贷款余额(元)</td>
                      <td class="name-info">
                        <el-input
                          v-model="qCList.loan_balance"
                          size="mini"
                          placeholder="请输入内容"
                          @keyup.native="qCList.loan_balance=qCList.loan_balance.replace(/[^\d.]/g,'')"
                        /></td>
                      <td class="name-title">按揭银行</td>
                      <td class="name-info">
                        <el-select v-model="qCList.mortgage_bank" size="mini" placeholder="请选择">
                          <el-option
                            v-for="dict in bankList"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          />
                        </el-select>
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">备注</td>
                      <td class="name-info" colspan="6"><el-input v-model="qCList.memo" size="mini" placeholder="请输入内容" /></td>
                    </tr>
                  </table>
                  <table v-if="isShowHouse" style="margin-bottom:15px; border: 1px solid #DCDCDC;" class="name-style">
                    <tr>
                      <td class="bd" colspan="6">房产信息
                        <span class="fr">
                          <el-button type="primary" size="mini" @click="subHouseInfo()">保存</el-button>
                          <el-button type="info" size="mini" @click="canHouseInfo()">取消</el-button>
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">房产地址</td>
                      <td class="name-info" colspan="3"><el-input v-model="houseList.address" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">面积</td>
                      <td class="name-info"><el-input
                        v-model="houseList.area"
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="houseList.area=houseList.area.replace(/[^\d.]/g,'')"
                      /></td>
                    </tr>
                    <tr>
                      <td class="name-title">产权人</td>
                      <td class="name-info"><el-input v-model="houseList.property_owner" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">产权人关系</td>
                      <td class="name-info"><el-input v-model="houseList.property_owner_relation" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">购买时间</td>
                      <td class="name-info">
                        <el-date-picker
                          v-model="houseList.purchase_time"
                          size="mini"
                          style="width:100%"
                          type="date"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">是否按揭</td>
                      <td class="name-info">
                        <el-input
                          v-model="houseList.mortgage_status"
                          size="mini"
                          placeholder="请输入内容"
                        />
                      </td>
                      <td class="name-title">贷款余额(元)</td>
                      <td class="name-info"><el-input
                        v-model="houseList.loan_balance"
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="houseList.loan_balance=houseList.loan_balance.replace(/[^\d.]/g,'')"
                      /></td>
                      <td class="name-title">评估价格</td>
                      <td class="name-info">
                        <el-input
                          v-model="houseList.evaluation_price"
                          size="mini"
                          placeholder="请输入内容"
                          @keyup.native="houseList.evaluation_price=houseList.evaluation_price.replace(/[^\d.]/g,'')"
                        /></td>
                    </tr>
                    <tr>
                      <td class="name-title">按揭银行</td>
                      <td class="name-info">
                        <el-select v-model="houseList.mortgage_bank" size="mini" placeholder="请选择">
                          <el-option
                            v-for="dict in bankList"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          />
                        </el-select>
                      </td>
                      <td class="name-title">备注</td>
                      <td colspan="4">
                        <el-input
                          v-model="houseList.memo"
                          size="mini"
                          placeholder="请输入内容"
                        />
                      </td>
                    </tr>
                  </table>
                </div>
                <div v-if="(assList.length>0 )|| (autoList.length>0) ">
                  <table v-for="(item ,index) in assList " :key="'info2-'+index" style="margin-bottom:15px; border: 1px solid #DCDCDC ;" class="name-style">
                    <tr>
                      <td class="bd" colspan="6">房产信息-{{ index + 1 }}
                        <i v-if="isHouseEdit !== index" class="el-icon-edit " @click="editHouseInfo(index)"></i>
                        <i v-if="isHouseEdit !== index" class="el-icon-delete " @click="delHouseInfo(item)"></i>
                        <span v-if="isHouseEdit === index" class="fr">
                          <el-button type="primary" size="mini" @click="handleHouseBtn()">保存</el-button>
                          <el-button type="info" size="mini" @click="cancelEditHouseinfo()">取消</el-button>
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">房产地址</td>
                      <td v-if="isHouseEdit !== index" colspan="3" class="name-info">{{ item.address || "-" }}</td>
                      <td v-else class="name-info" colspan="3"><el-input v-model="houseList.address" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title">面积(平方)</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.area || "-" }}</td>
                      <td v-else class="name-info"><el-input
                        v-model="houseList.area"
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="houseList.area=houseList.area.replace(/[^\d.]/g,'')"
                      /></td>
                    </tr>
                    <tr class="bg">
                      <td class="name-title bg">产权人</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.property_owner || "-" }}</td>
                      <td v-else class="name-info"><el-input v-model="houseList.property_owner" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title bg">产权人关系</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.property_owner_relation || "-" }}</td>
                      <td v-else class="name-info"><el-input v-model="houseList.property_owner_relation" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title bg">购买时间</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.purchase_time || "-" }}</td>
                      <td v-else class="name-info">
                        <el-date-picker
                          v-model="houseList.purchase_time"
                          size="mini"
                          style="width:100%"
                          type="date"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">是否按揭</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.mortgage_status }}</td>
                      <td v-else class="name-info">
                        <el-input
                          v-model="houseList.mortgage_status"
                          size="mini"
                          placeholder="请输入内容"
                        />
                      </td>
                      <td class="name-title">贷款余额(元)</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.loan_balance || "-" }}</td>
                      <td v-else class="name-info"><el-input v-model="houseList.loan_balance" size="mini" placeholder="请输入内容" @keyup.native="houseList.loan_balance=houseList.loan_balance.replace(/[^\d.]/g,'')" /></td>
                      <td class="name-title">评估价格</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.evaluation_price || "-" }}</td>
                      <td v-else class="name-info"><el-input v-model="houseList.evaluation_price" size="mini" placeholder="请输入内容" @keyup.native="houseList.evaluation_price=houseList.evaluation_price.replace(/[^\d.]/g,'')" /></td>
                    </tr>
                    <tr class="bg">
                      <td class="name-title bg">按揭银行</td>
                      <td v-if="isHouseEdit !== index" class="name-info">{{ item.mortgage_bank_display || "-" }}</td>
                      <td v-else class="name-info">
                        <el-select v-model="houseList.mortgage_bank" size="mini" placeholder="请选择">
                          <el-option
                            v-for="dict in bankList"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          />
                        </el-select>
                      </td>
                      <td class="name-title bg">备注</td>
                      <td v-if="isHouseEdit !== index" colspan="4" class="name-info">{{ item.memo || "-" }}</td>
                      <td v-else colspan="4" class="name-info"><el-input v-model="houseList.memo" size="mini" placeholder="请输入内容" /></td>
                    </tr>
                  </table>
                  <table v-for="(item ,index) in autoList " :key="'info3-'+index" style="  margin-bottom:15px" class="name-style">
                    <tr>
                      <td class="bd" colspan="6">车产信息-{{ index + 1 }}
                        <i v-if="isAutoEdit !== index" class="el-icon-edit " @click="editAutoInfo(index)"></i>
                        <i v-if="isAutoEdit !== index" class="el-icon-delete " @click="delAutoInfo(item)"></i>
                        <span v-if="isAutoEdit === index" class="fr">
                          <el-button type="primary" size="mini" @click="handleAutoBtn()">保存</el-button>
                          <el-button type="info" size="mini" @click="cancelEditAutoinfo()">取消</el-button>
                        </span>
                      </td>
                    </tr>
                    <tr class="bg">
                      <td class="name-title bg">汽车品牌</td>
                      <td v-if="isAutoEdit !== index" class="name-info">{{ item.brand || "-" }}</td>
                      <td v-else class="name-info"><el-input v-model="qCList.brand" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title bg">汽车型号</td>
                      <td v-if="isAutoEdit !== index" class="name-info">{{ item.model || "-" }}</td>
                      <td v-else class="name-info"><el-input v-model="qCList.model" size="mini" placeholder="请输入内容" /></td>
                      <td class="name-title bg">购买时间</td>
                      <td v-if="isAutoEdit !== index" class="name-info">{{ item.purchase_time || "-" }}</td>
                      <td v-else class="name-info">
                        <el-date-picker
                          v-model="qCList.purchase_time"
                          size="mini"
                          style="width:100%"
                          type="date"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">按揭状况</td>
                      <td v-if="isAutoEdit !== index" class="name-info">{{ item.mortgage_status }}</td>
                      <td v-else class="name-info">
                        <el-input
                          v-model="qCList.mortgage_status"
                          size="mini"
                          placeholder="请输入内容"
                        />
                      </td>
                      <td class="name-title">贷款余额(元)</td>
                      <td v-if="isAutoEdit !== index" class="name-info">{{ item.loan_balance || "-" }}</td>
                      <td v-else class="name-info"><el-input
                        v-model="qCList.loan_balance"
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="qCList.loan_balance=qCList.loan_balance.replace(/[^\d.]/g,'')"
                      /></td>
                      <td class="name-title">按揭银行</td>
                      <td v-if="isAutoEdit !== index" class="name-info">{{ item.mortgage_bank_display|| "-" }}</td>
                      <td v-else class="name-info">
                        <el-select v-model="qCList.mortgage_bank" size="mini" placeholder="请选择">
                          <el-option
                            v-for="dict in bankList"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          />
                        </el-select>
                      </td>
                    </tr>
                    <tr class="bg">
                      <td class="name-title bg">备注</td>
                      <td v-if="isAutoEdit !== index" class="name-info" colspan="6">{{ item.memo || "-" }}</td>
                      <td v-else class="name-info" colspan="6"><el-input v-model="qCList.memo" size="mini" placeholder="请输入内容" /></td>
                    </tr>
                  </table>
                </div>
                <div v-else class="no_data">暂无数据</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="信用概况" name="four">
              <div class="info">
                <span class="info_btns">
                  <span></span>
                  <span>
                    <el-button v-if="isCreaditEdit" type="primary" size="mini" @click="editCreditInfo()">编辑</el-button>
                    <el-button v-if="!isCreaditEdit" type="primary" size="mini" @click="handleXyBtn()">保存</el-button>
                    <el-button v-if="!isCreaditEdit" type="info" size="mini" @click="cancelEditXyInfo()">取消</el-button>
                  </span>
                </span>
                <table class="name-style bd" style="margin-bottom:15px">
                  <tr class="bd">
                    <td style="text-align:center" colspan="6">主贷人
                    </td>
                  </tr>
                  <tr>
                    <td class="name-title">信用卡张数</td>
                    <td v-if="isCreaditEdit" class="name-info">{{ creditList.count_of_credit_card || "-" }}</td>
                    <td v-else class="name-info"><el-input
                      v-model="creditList.count_of_credit_card"
                      size="mini"
                      placeholder="请输入内容"
                      @keyup.native="creditList.count_of_credit_card=creditList.count_of_credit_card.replace(/[^0-9]/g,'')"
                    /></td>
                    <td class="name-title">信用卡额度(万)</td>
                    <td v-if="isCreaditEdit" class="name-info">{{ creditList.total_limit_of_credit_card || "-" }}</td>
                    <td v-else class="name-info"><el-input
                      v-model="creditList.total_limit_of_credit_card "
                      size="mini"
                      placeholder="请输入内容"
                      @keyup.native="creditList.total_limit_of_credit_card=creditList.total_limit_of_credit_card.replace(/[^\d.]/g,'')"
                    /></td>
                    <td class="name-title">已使用额度(万)</td>
                    <td v-if="isCreaditEdit" class="name-info">{{ creditList.used_limit_of_credit_card || "-" }}</td>
                    <td v-else class="name-info">
                      <el-input
                        v-model="creditList.used_limit_of_credit_card"
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="creditList.used_limit_of_credit_card=creditList.used_limit_of_credit_card.replace(/[^\d.]/g,'')"
                      /></td>
                  </tr>
                  <tr class="bg">
                    <td class="name-title bg">贷款笔数</td>
                    <td v-if="isCreaditEdit" class="name-info">{{ creditList.num_of_load || "-" }}</td>
                    <td v-else class="name-info">
                      <el-input
                        v-model="creditList.num_of_load "
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="creditList.num_of_load=creditList.num_of_load.replace(/[^0-9]/g,'')"
                      /></td>
                    <td class="name-title bg">贷款金额(万)</td>
                    <td v-if="isCreaditEdit" class="name-info">{{ creditList.amount_of_loan || "-" }}</td>
                    <td v-else class="name-info">
                      <el-input
                        v-model="creditList.amount_of_loan "
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="creditList.amount_of_loan=creditList.amount_of_loan.replace(/[^\d.]/g,'')"
                      /></td>
                    <td class="name-title bg">剩余贷款(万)</td>
                    <td v-if="isCreaditEdit" class="name-info">{{ creditList.balance_of_load || "-" }}</td>
                    <td v-else class="name-info">
                      <el-input
                        v-model="creditList.balance_of_load "
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="creditList.balance_of_load=creditList.balance_of_load.replace(/[^\d.]/g,'')"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td class="name-title">征信查询次数</td>
                    <td v-if="isCreaditEdit" colspan="5" class="name-info">{{ creditList.times_of_credit_inquiry || "-" }}</td>
                    <td v-else colspan="5" class="name-info"><el-input
                      v-model="creditList.times_of_credit_inquiry "
                      size="mini"
                      placeholder="请输入内容"
                      @keyup.native="creditList.times_of_credit_inquiry=creditList.times_of_credit_inquiry.replace(/[^0-9]/g,'')"
                    /></td>
                  </tr>
                  <template v-if="sysList.marital_status ==='已婚'">
                    <tr class="bd">
                      <td style="text-align:center" colspan="6">配偶</td>
                    </tr>
                    <tr>
                      <td class="name-title">信用卡张数</td>
                      <td v-if="isCreaditEdit" class="name-info">{{ creditList.spouse_count_of_credit_card || "-" }}</td>
                      <td v-else class="name-info"><el-input
                        v-model="creditList.spouse_count_of_credit_card "
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="creditList.spouse_count_of_credit_card=creditList.spouse_count_of_credit_card.replace(/[^0-9]/g,'')"
                      /></td>
                      <td class="name-title">信用卡额度</td>
                      <td v-if="isCreaditEdit" class="name-info">{{ creditList.spouse_total_limit_of_credit_card || "-" }}</td>
                      <td v-else class="name-info"><el-input
                        v-model="creditList.spouse_total_limit_of_credit_card "
                        size="mini"
                        placeholder="请输入内容"
                        @keyup.native="creditList.spouse_total_limit_of_credit_card=creditList.spouse_total_limit_of_credit_card.replace(/[^\d.]/g,'')"
                      /></td>
                      <td class="name-title">已使用额度(万)</td>
                      <td v-if="isCreaditEdit" class="name-info">{{ creditList.spouse_used_limit_of_credit_card || "-" }}</td>
                      <td v-else class="name-info">
                        <el-input
                          v-model="creditList.spouse_used_limit_of_credit_card "
                          size="mini"
                          placeholder="请输入内容"
                          @keyup.native="creditList.spouse_used_limit_of_credit_card=creditList.spouse_used_limit_of_credit_card.replace(/[^\d.]/g,'')"
                        />
                      </td>
                    </tr>
                    <tr class="bg">
                      <td class="name-title bg">贷款笔数</td>
                      <td v-if="isCreaditEdit" class="name-info">{{ creditList.spouse_num_of_load || "-" }}</td>
                      <td v-else class="name-info">
                        <el-input
                          v-model="creditList.spouse_num_of_load "
                          size="mini"
                          placeholder="请输入内容"
                          @keyup.native="creditList.spouse_num_of_load =creditList.spouse_num_of_load .replace(/[^0-9]/g,'')"
                        /></td>
                      <td class="name-title bg">贷款金额(万)</td>
                      <td v-if="isCreaditEdit" class="name-info">{{ creditList.spouse_amount_of_loan || "-" }}</td>
                      <td v-else class="name-info">
                        <el-input
                          v-model="creditList.spouse_amount_of_loan "
                          size="mini"
                          placeholder="请输入内容"
                          @keyup.native="creditList.spouse_amount_of_loan=creditList.spouse_amount_of_loan.replace(/[^\d.]/g,'')"
                        />
                      </td>
                      <td class="name-title bg">剩余贷款(万)</td>
                      <td v-if="isCreaditEdit" class="name-info">{{ creditList.spouse_balance_of_load || "-" }}</td>
                      <td v-else class="name-info">
                        <el-input
                          v-model="creditList.spouse_balance_of_load "
                          size="mini"
                          placeholder="请输入内容"
                          @keyup.native="creditList.spouse_balance_of_load=creditList.spouse_balance_of_load.replace(/[^\d.]/g,'')"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td class="name-title">征信查询次数</td>
                      <td v-if="isCreaditEdit" class="name-info">{{ creditList.spouse_times_of_credit_inquiry || "-" }}</td>
                      <td v-else class="name-info">
                        <el-input
                          v-model="creditList.spouse_times_of_credit_inquiry "
                          size="mini"
                          placeholder="请输入内容"
                          @keyup.native="creditList.spouse_times_of_credit_inquiry=creditList.spouse_times_of_credit_inquiry.replace(/[^0-9]/g,'')"
                        /></td>
                    </tr>
                  </template>
                  <tr style="height:80px" class="bg">
                    <td class="name-title bg">备注</td>
                    <td v-if="isCreaditEdit" colspan="5" class="name-info">{{ creditList.credit_memo || "-" }}</td>
                    <td v-else class="name-info" :rows="3" colspan="5"><el-input v-model="creditList.credit_memo " type="textarea" size="mini" placeholder="请输入内容" /></td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
          </el-tabs>
          <!-- 贷款流程 -->
          <template v-if="tabarIndex=== 'second'">
            <el-timeline v-if="bussiList.length>0">
              <el-timeline-item
                v-for="(item ,index) in bussiList "
                :key="'info1-'+index"
                type="primary"
                :timestamp="item.create_datetime"
                placement="top"
              >
                <div class="dk_process">
                  <el-tag effect="plain" size="mini" type="success"> {{ item.creator_name || "-" }}</el-tag>
                  <div class="pro_info">{{ item.content }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
            <div v-else class="no_data">暂无数据</div>
          </template>
          <!-- <div v-if="tabarIndex=== 'second'" class="call_style">
            <el-table
              v-if="bussiList.length>0"
              :data="bussiList"
              size="mini"
            >
              <el-table-column
                label="序号"
                type="index"
                width="76px"
              />
              <el-table-column prop="status" label="呼叫状态" />
              <el-table-column
                label="接通时间"
              >
                <template slot-scope="{row}">
                  <span>{{ row.connect_time | formDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="挂断时间"
              >
                <template slot-scope="{row}">
                  <span>{{ row.hangup_time | formDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="通话时长"
              >
                <template slot-scope="{row}">
                  <span>{{ row.talk_time }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="拨号人"
                width="100"
              >
                <template slot-scope="{row}">
                  <span>{{ row.creator_name }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div v-else class="no_data">暂无数据</div>
          </div> -->
          <!--上传附件  -->
          <div v-if="tabarIndex=== 'third'" class="pro_fj">
            <el-upload
              ref="upload"
              class="upload_demo"
              :auto-upload="false"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">点击或将文件拖到此处</div>
              <div class="el-upload__text">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <div v-if="tableData.length>0" class="fj_table">
              <div class="fj_top">
                <span style="padding: 0 10px; border-left: 2px solid #0960BD;">待上传附件</span>
                <div>
                  <el-button size="mini" type="info" @click="tableData = []">取消</el-button>
                  <el-button size="mini" type="primary" @click="submitUpload">上传文件</el-button>
                </div>
              </div>
              <el-table
                :data="tableData"
                size="mini"
              >
                <el-table-column
                  prop="name"
                  label="附件名称"
                >
                </el-table-column>
                <el-table-column
                  label="附件类型"
                >
                  <template slot-scope="{row}">
                    <el-select v-model="row.category" size="mini" placeholder="请选择">
                      <el-option
                        v-for="dict in attachmentList"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="附件描述"
                >
                  <template slot-scope="{row}">
                    <el-input v-model="row.description" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="100"
                >
                  <template slot-scope="{row}">
                    <el-button type="text" size="small" @click="delFile(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="successData && successData.length>0" class="fj_table fj_table_1">
              <div class="fj_top">
                <span style="padding: 0 10px; border-left: 2px solid #0960BD;">已上传附件</span>
              </div>
              <el-table
                :data="successData"
                size="mini"
              >
                <el-table-column
                  prop="name"
                  label="附件名称"
                >
                </el-table-column>
                <el-table-column
                  label="附件类型"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.category_display || '-' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="附件描述"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.description || '-' }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="100"
                >
                  <template slot-scope="{row}">
                    <el-button type="text" size="small" @click="delSuccFile(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 跟进记录 -->
          <template v-if="tabarIndex=== 'forth'">
            <el-timeline v-if="fllList.length>0">
              <el-timeline-item
                v-for="(item ,index) in fllList "
                :key="'info21-'+index"
                type="primary"
                :timestamp="item.create_datetime"
                placement="top"
              >
                <div class="dk_process">
                  <el-tag effect="plain" size="mini" type="success"> {{ item.creator_name || "-" }}</el-tag>
                  <div class="pro_info">{{ item.content }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
            <div v-else class="no_data">暂无数据</div>
          </template>
          <!-- 操作记录 -->
          <template v-if="tabarIndex=== 'fifth'">
            <el-timeline v-if="mainList.length>0">
              <el-timeline-item
                v-for="(item ,index) in mainList "
                :key="'info13-'+index"
                type="primary"
                :timestamp="item.create_datetime"
                placement="top"
              >
                <div class="dk_process">
                  <el-tag effect="plain" size="mini" type="success"> {{ item.creator_name || "未知" }}</el-tag>
                  <div class="pro_info">{{ item.content }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
            <div v-else class="no_data">暂无数据</div>
          </template>
          <!-- 通话记录 -->
          <div v-if="tabarIndex=== 'sixth'" class="call_style">
            <el-table
              v-if="callList.length>0"
              :data="callList"
              size="mini"
            >
              <el-table-column
                label="序号"
                type="index"
                width="76px"
              />
              <el-table-column prop="status" label="呼叫状态" />
              <el-table-column
                label="接通时间"
              >
                <template slot-scope="{row}">
                  <span>{{ row.connect_time | formDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="挂断时间"
              >
                <template slot-scope="{row}">
                  <span>{{ row.hangup_time | formDate }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="通话时长"
              >
                <template slot-scope="{row}">
                  <span>{{ row.talk_time }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="拨号人"
                width="100"
              >
                <template slot-scope="{row}">
                  <span>{{ row.creator_name }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div v-else class="no_data">暂无数据</div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getUserDetail,
  getAssetDetail,
  getAutoDetail,
  getCreditDetail,
  uploadExcel1,
  getAreaList,
  delAutoDetail,
  getLogList,
  getUploadExcel,
  delUploadExcel,
  updateUserDetail,
  editCreditDetail,
  addAutoDetail,
  addAssetDetail,
  editAssetDetail,
  editAutoDetail,
  getIndustryList,
  getProfessionList,
  getPayList,
  gettAttachmentList,
  delAssetDetail,
  getBankList,
  getWorkDetail,
  updateWorkrDetail,
  updateBaseDetail,
  getBaseDetail
} from "@/api/crm/customer.js";
import star from "@/components/star/index.vue";
import { exportMsg } from "@/utils/cusMgt/customer";
import Cookies from "js-cookie";
import moment from "moment";
export default {
  components: { star },
  filters: {
    formDate(value) {
      return moment(value).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  props: {
    category: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      tabarIndex: "first",
      tarlist: [{ value: "first", label: "客户信息" }, { value: "second", label: "贷款流程" },
        { value: "third", label: "上传附件" }, { value: "forth", label: "跟进记录" },
        { value: "fifth", label: "操作记录" }, { value: "sixth", label: "通话记录" }],
      navText: "客户详情",
      left: "6px",
      areaList: [],
      isShowHouse: false,
      isShowAuto: false,
      drawer: false,
      userActive: "one",
      isEdit: true,
      isDwEdit: true,
      isHouseEdit: -1,
      isAutoEdit: -1,
      isCreaditEdit: true,
      curId: "",
      inputValue: "",
      tableData: [],
      successData: [], // 已上传文件
      description: "",
      industryList: [],
      professionList: [],
      attachmentList: [],
      attachment_type: "",
      bankList: [],
      payList: [],
      genderList: [
        {
          value: "女",
          label: "女"
        },
        {
          value: "男",
          label: "男"
        }
      ],
      // 婚姻
      ldlist: [
        { value: "已婚", label: "已婚" },
        { value: "未婚", label: "未婚" },
        { value: "离异", label: "离异" },
        { value: "丧偶", label: "丧偶" }
      ],
      // 客户信息
      list: "",
      cusInfo: {
        name: "",
        phone: "",
        owner_username: "",
        is_focused: "false",
        star: "",
        type: "",
        memo: "",
        required_load_amount: "",
        status_display: "",
        clue_name: "",
        clue_source: "",
        source: ""
      },
      sysList: {
        gender: "",
        residence_display: "",
        birth_year: null,
        residence: [],
        tel: "",
        email: "",
        id_number: "",
        profession_category: "",
        industry: "",
        work_unit: "",
        hiredate: "",
        pay_method: "",
        social_security_base: "",
        amount_of_housing_fund: "",
        marital_status: "",
        spouse_name: "",
        spouse_birth_year: "",
        spouse_residence: [],
        spouse_residence_display: "",
        spouse_phone: "",
        spouse_work_unit: "",
        spouse_annual_flow: "",
        spouse_id_number: ""
      },
      // 单位
      workList: {
        name: "",
        establishment_time: null,
        registered_capital: "",
        share: null,
        annual_billing: "",
        personal_annual_flow: "",
        enterprise_annual_flow: "",
        business_scope: "",
        industry: "",
        registered_address: "",
        memo: ""
      },
      // 贷款流程
      bussiList: [],
      // 跟进
      fllList: [],
      // 操作
      mainList: [],
      callList: [],
      // 房产
      assList: [],
      houseList: {
        address: "",
        area: "",
        property_owner: "",
        property_owner_relation: "",
        purchase_time: "",
        mortgage_status: "",
        loan_balance: "",
        evaluation_price: "",
        mortgage_bank: ""
      },
      // 车产
      autoList: [],
      qCList: {
        brand: "",
        model: "",
        purchase_time: "",
        mortgage_status: "",
        memo: "",
        mortgage_bank: "",
        loan_balance: "",
        customer: ""
      },
      // 信用
      creditList: {
        count_of_credit_card: "",
        total_limit_of_credit_card: "",
        used_limit_of_credit_card: "",
        num_of_load: "",
        amount_of_loan: "",
        balance_of_load: "",
        times_of_credit_inquiry: "",
        spouse_count_of_credit_card: null,
        spouse_total_limit_of_credit_card: null,
        spouse_used_limit_of_credit_card: null,
        spouse_num_of_load: null,
        spouse_amount_of_loan: null,
        spouse_balance_of_load: null,
        spouse_times_of_credit_inquiry: null,
        credit_memo: ""
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10000,
        customer: ""
      }
    };
  },
  methods: {
    open(row) {
      this.curId = row.id;
      Cookies.set("curId", this.curId);
      this.drawer = true;
      this.getUserDetail(row.id);
      this.getBaseDetail(row.id);
    },
    // tab切换
    handleClick(value) {
      this.tabarIndex = value;
      if (value === "first") {
        this.$refs.mySelect.style.left = "6px";
        this.$refs.mySelect.style.transition = "All .2s ease-in-out";
        this.navText = "客户信息";
        this.getUserDetail(this.curId);
      }
      if (value === "second") {
        this.$refs.mySelect.style.left = "105px";
        this.$refs.mySelect.style.transition = "All .2s ease-in-out";
        this.navText = "贷款流程";
        this.getLogList(this.curId, "business_log");
      }
      if (value === "third") {
        this.$refs.mySelect.style.left = "203px";
        this.$refs.mySelect.style.transition = "All .2s ease-in-out";
        this.navText = "上传附件";
        this.gettAttachmentList();
        this.getUploadExcel();
      }
      if (value === "forth") {
        this.$refs.mySelect.style.left = "301px";
        this.$refs.mySelect.style.transition = "All .2s ease-in-out";
        this.navText = "跟进记录";
        this.getLogList(this.curId, "follow_log");
      }
      if (value === "fifth") {
        this.$refs.mySelect.style.left = "399px";
        this.$refs.mySelect.style.transition = "All .2s ease-in-out";
        this.navText = "操作记录";
        this.getLogList(this.curId, "edit_log");
      }
      if (value === "sixth") {
        this.$refs.mySelect.style.left = "498px";
        this.$refs.mySelect.style.transition = "All .2s ease-in-out";
        this.navText = "通话记录";
        this.getLogList(this.curId, "call_log");
      }
    },
    handleCusClick(tab) {
      const value = tab.name;
      if (value === "two") {
        this.getWorkDetail(this.curId);
      }
      if (value === "three") {
        this.getAssetDetail(this.curId);
        this.getAutoDetail(this.curId);
      }
      if (value === "four") {
        this.getCreditDetail(this.curId);
      }
    },
    // 导出客户信息
    exportCusMsg() {
      exportMsg(this.curId);
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data());
      this.$refs.mySelect.style.left = this.left;
    },
    // 关注客户
    clickFocuesd(value) {
      const focused = value ? "true" : "false";
      this.updateUserDetail(this.curId, { is_focused: focused }, "patch");
      this.$parent.getList();
    },
    // 获取职业
    getProfessionList() {
      getProfessionList().then((res) => {
        this.professionList = res.data;
      });
    },
    // 获取行业
    getIndustryList() {
      getIndustryList().then((res) => {
        this.industryList = res.data;
      });
    },
    // getPayList
    getPayList() {
      getPayList().then((res) => {
        this.payList = res.data;
      });
    },
    // 地区
    getAreaList() {
      getAreaList().then((res) => {
        this.areaList = res.data;
      });
    },
    // 银行
    getBankList() {
      getBankList().then((res) => {
        this.bankList = res.data;
      });
    },
    // 附件类型
    gettAttachmentList() {
      gettAttachmentList().then((res) => {
        this.attachmentList = res.data;
      });
    },
    // 添加跟进记录
    addFollowLog() {
      this.drawer = false;
      setTimeout(() => {
        this.$parent.handleFollowLog({ id: Cookies.get("curId") });
      }, 250);
    },
    // ========================上传附件=========================================
    handleChange(file, fileList) {
      this.tableData = fileList;
    },
    beforeUpload(file) {
      if (file) {
        const tableData = this.tableData.filter(
          (item) => item.uid === file.uid
        )[0];
        const fileName = file.name;
        const pos = fileName.lastIndexOf(".");
        const lastName = fileName.substring(pos, fileName.length);
        if (
          lastName.toLowerCase() === ".pdf" ||
          lastName.toLowerCase() === ".doc" ||
          lastName.toLowerCase() === ".docx" ||
          lastName.toLowerCase() === ".jpg" ||
          lastName.toLowerCase() === ".jpeg" ||
          lastName.toLowerCase() === ".xls" ||
          lastName.toLowerCase() === ".xlsx"
        ) {
          this.$nextTick(() => {
            if (!file) {
              this.$message.info("请选择上传的文件");
              return;
            }
            const formData = new FormData();
            formData.append("file", file);
            formData.append("category", tableData.category);
            formData.append("description", tableData.description);
            this.uploadExcel(formData);
          });
        } else {
          this.$message.warning("附件格式错误，请删除后重新上传！");
        }
      }
      return false;
    },
    // 确定上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    uploadExcel(formData) {
      formData.append("customer", this.curId);
      uploadExcel1(formData).then((res) => {
        if (res.code === 200) {
          this.getUploadExcel();
          this.$message.success("文件上传成功");
        } else {
          this.$message.error("文件上传失败");
        }
      });
    },
    // 本地删除
    delFile(row) {
      this.tableData = this.tableData.filter((item) => {
        return item.uid !== row.uid;
      });
    },
    // 获取已上传文件
    getUploadExcel() {
      this.queryParams.customer = this.curId;
      getUploadExcel(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.successData = res.data.results;
        }
      });
    },
    // 删除已上传文件
    async delSuccFile(row) {
      await this.$confirm("确认要删除当前信息?", "温馨提示", {
        type: "warning"
      });
      await delUploadExcel(row.id).then((res) => {
        this.$message.success("删除成功");
        this.getUploadExcel();
      });
    },
    // ========================客户信息 ========================================
    // 基本信息
    getBaseDetail(id) {
      getBaseDetail(id).then((res) => {
        if (res.data.results.length === 0) {
          this.sysList.customer = this.curId;
        } else {
          this.list = res.data.results[0];
          this.sysList.id = this.list.id;
          this.sysList.gender = this.list.gender;
          this.sysList.birth_year = this.list.birth_year;
          this.sysList.residence_display = this.list.residence_display;
          this.sysList.tel = this.list.tel;
          this.sysList.email = this.list.email;
          this.sysList.id_number = this.list.id_number;
          this.sysList.profession_category = this.list.profession_category;
          this.sysList.profession_category_display =
            this.list.profession_category_display;
          this.sysList.industry = this.list.industry;
          this.sysList.industry_display = this.list.industry_display;
          this.sysList.work_unit = this.list.work_unit;
          this.sysList.hiredate = this.list.hiredate;
          this.sysList.pay_method = this.list.pay_method;
          this.sysList.pay_method_display = this.list.pay_method_display;
          this.sysList.social_security_base = this.list.social_security_base;
          this.sysList.amount_of_housing_fund =
            this.list.amount_of_housing_fund;
          this.sysList.marital_status = this.list.marital_status;
          this.sysList.spouse_name = this.list.spouse_name;
          this.sysList.spouse_birth_year = this.list.spouse_birth_year;
          this.sysList.spouse_phone = this.list.spouse_phone;
          this.sysList.spouse_work_unit = this.list.spouse_work_unit;
          this.sysList.spouse_annual_flow = this.list.spouse_annual_flow;
          this.sysList.spouse_id_number = this.list.spouse_id_number;
          this.sysList.spouse_residence_display =
            this.list.spouse_residence_display;
          if (this.list.residence) {
            this.sysList.residence = [];
            let residence = [];
            residence = this.list.residence.split(",");
            residence.forEach((item) => {
              this.sysList.residence.push(Number(item));
            });
          }
          // console.log("residence", this.sysList.residence);
          if (this.list.spouse_residence) {
            this.sysList.spouse_residence = [];
            let spouse_residence = [];
            spouse_residence = this.list.spouse_residence.split(",");
            spouse_residence.forEach((item) => {
              this.sysList.spouse_residence.push(Number(item));
            });
            // console.log("spouse_residence", this.sysList.spouse_residence);
          }
          this.$forceUpdate(); // 强制刷新
        }
      });
    },
    // 获取系统信息
    getUserDetail(id) {
      getUserDetail(id, this.$parent.category).then((res) => {
        if (res.code === 200) {
          this.list = res.data;
          this.cusInfo.name = this.list.name;
          this.cusInfo.type = this.list.type;
          this.cusInfo.required_load_amount = this.list.required_load_amount;
          this.cusInfo.clue_name = this.list.clue_name;
          this.cusInfo.status_display = this.list.status_display;
          this.cusInfo.source_display = this.list.source_display;
          this.cusInfo.clue_source = this.list.clue_source;
          this.cusInfo.update_datetime = this.list.update_datetime;
          this.cusInfo.create_datetime = this.list.create_datetime;
          this.cusInfo.star = this.list.star;
          this.cusInfo.is_focused = this.list.is_focused;
          this.cusInfo.owner_username = this.list.owner_username;
        }
      });
    },
    updateUserDetail(id, obj, method) {
      updateUserDetail(id, obj, method, this.$parent.category).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getUserDetail(this.curId);
          this.isEdit = true;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    // 单位信息
    getWorkDetail(id) {
      getWorkDetail(id).then((res) => {
        if (res.data.results.length === 0) {
          this.workList.customer = this.curId;
        } else {
          this.workList.name = res.data.results[0].name;
          this.workList.id = res.data.results[0].id;
          this.workList.establishment_time = res.data.results[0]
            .establishment_time
            ? res.data.results[0].establishment_time
            : null;
          this.workList.registered_capital =
            res.data.results[0].registered_capital;
          this.workList.share = res.data.results[0].share
            ? res.data.results[0].share
            : null;
          this.workList.annual_billing = res.data.results[0].annual_billing;
          this.workList.personal_annual_flow =
            res.data.results[0].personal_annual_flow;
          this.workList.enterprise_annual_flow =
            res.data.results[0].enterprise_annual_flow;
          this.workList.business_scope = res.data.results[0].business_scope;
          this.workList.industry = res.data.results[0].industry;
          this.workList.registered_address =
            res.data.results[0].registered_address;
          this.workList.memo = res.data.results[0].memo;
        }
      });
    },
    // 房产
    getAssetDetail(id) {
      getAssetDetail(id).then((res) => {
        if (res.code === 200) {
          this.assList = res.data.results;
        }
      });
    },
    // 信用
    getCreditDetail(id) {
      getCreditDetail(id).then((res) => {
        if (res.code === 200) {
          if (res.data.results.length === 0) {
            this.creditList.customer = this.curId;
          } else {
            const creditList = res.data.results[0];
            this.creditList.id = creditList.id;
            this.creditList.count_of_credit_card =
              creditList.count_of_credit_card;
            this.creditList.total_limit_of_credit_card =
              creditList.total_limit_of_credit_card;
            this.creditList.used_limit_of_credit_card =
              creditList.used_limit_of_credit_card;
            this.creditList.num_of_load = creditList.num_of_load;
            this.creditList.amount_of_loan = creditList.amount_of_loan;
            this.creditList.balance_of_load = creditList.balance_of_load;
            this.creditList.times_of_credit_inquiry =
              creditList.times_of_credit_inquiry;
            this.creditList.spouse_count_of_credit_card =
              creditList.spouse_count_of_credit_card
                ? creditList.spouse_count_of_credit_card
                : null;
            this.creditList.spouse_total_limit_of_credit_card =
              creditList.spouse_total_limit_of_credit_card
                ? creditList.spouse_total_limit_of_credit_card
                : null;
            this.creditList.spouse_used_limit_of_credit_card =
              creditList.spouse_used_limit_of_credit_card
                ? creditList.spouse_used_limit_of_credit_card
                : null;
            this.creditList.spouse_amount_of_loan =
              creditList.spouse_amount_of_loan
                ? creditList.spouse_amount_of_loan
                : null;
            this.creditList.spouse_times_of_credit_inquiry =
              creditList.spouse_times_of_credit_inquiry
                ? creditList.spouse_times_of_credit_inquiry
                : null;
            this.creditList.credit_memo = creditList.credit_memo;
          }
        }
      });
    },
    // 车产
    getAutoDetail(id) {
      getAutoDetail(id).then((res) => {
        if (res.code === 200) {
          this.autoList = res.data.results;
        }
      });
    },
    // 日志
    getLogList(customer, type) {
      getLogList(type, { customer: customer, pageSize: 10000 }).then((res) => {
        if (res.code === 200) {
          if (type === "business_log") {
            this.bussiList = res.data.results;
          }
          if (type === "follow_log") {
            this.fllList = res.data.results;
          }
          if (type === "edit_log") {
            this.mainList = res.data.results;
          }
          if (type === "call_log") {
            this.callList = res.data.results;
          }
        }
      });
    },
    // 编辑个人信息
    editUserinfo() {
      this.getBaseDetail(this.curId);
      this.getIndustryList();
      this.getProfessionList();
      this.getPayList();
      this.getAreaList();
      this.isEdit = false;
    },
    // 取消编辑个人信息
    cancelEditUserinfo() {
      this.isEdit = true;
      this.getBaseDetail(this.curId);
      Object.assign(this.sysList, this.$options.data().sysList);
    },
    // 确定修改个人信息
    handleKhBtn() {
      this.updateBaseDetail(this.sysList.id, this.sysList);
    },
    // 基本信息
    updateBaseDetail(id, obj) {
      updateBaseDetail(id, obj).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getBaseDetail(this.curId);
          this.isEdit = true;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    // 编辑信用信息
    editCreditInfo() {
      this.isCreaditEdit = false;
    },
    // 取消编辑信用信息
    cancelEditXyInfo() {
      this.isCreaditEdit = true;
      this.getCreditDetail(this.curId);
    },
    // 确定修改信用信息
    handleXyBtn() {
      editCreditDetail(this.creditList.id, this.creditList).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getCreditDetail(this.curId);
          this.isCreaditEdit = true;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    // 编辑单位信息
    editDwinfo() {
      this.isDwEdit = false;
      this.getIndustryList();
    },
    // 取消编辑单位信息
    cancelEditDwinfo() {
      this.isDwEdit = true;
      this.getWorkDetail(this.curId);
    },
    // 确定修改单位信息
    handleDwBtn() {
      updateWorkrDetail(this.workList.id, this.workList).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getWorkDetail(this.curId);
          this.isDwEdit = true;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    // 编辑房产信息
    editHouseInfo(index) {
      this.getBankList();
      this.isHouseEdit = index;
      const assList = this.assList[index];
      this.houseList.address = assList.address;
      this.houseList.id = assList.id;
      this.houseList.area = assList.area ? assList.area : null;
      this.houseList.property_owner = assList.property_owner;
      this.houseList.property_owner_relation = assList.property_owner_relation;
      this.houseList.purchase_time = assList.purchase_time
        ? assList.purchase_time
        : null;
      this.houseList.mortgage_status = assList.mortgage_status;
      this.houseList.loan_balance = assList.loan_balance
        ? assList.loan_balance
        : null;
      this.houseList.evaluation_price = assList.evaluation_price
        ? assList.evaluation_price
        : null;
      this.houseList.mortgage_bank = assList.mortgage_bank;
    },
    // 取消编辑房产信息
    cancelEditHouseinfo() {
      this.isHouseEdit = -1;
      this.getAssetDetail(this.curId);
    },
    // 确定编辑房产信息
    handleHouseBtn() {
      this.houseList.customer = this.curId;
      editAssetDetail(this.houseList).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getAssetDetail(this.curId);
          this.isHouseEdit = -1;
          this.isShowHouse = false;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    // 取消添加房产信息
    canHouseInfo() {
      this.isShowHouse = false;
      Object.assign(this.$data.houseList, this.$options.data().houseList);
    },
    // 删除房产
    async delHouseInfo(index) {
      await this.$confirm("确认要删除当前信息?", "温馨提示", {
        type: "warning"
      });
      await delAssetDetail(index.id)
        .then((res) => {
          this.getAssetDetail(this.curId);
          this.$message.success("删除成功");
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 确定添加房产信息
    subHouseInfo() {
      this.houseList.customer = this.curId;
      this.houseList.area = this.houseList.area ? this.houseList.area : null;
      this.houseList.purchase_time = this.houseList.purchase_time
        ? this.houseList.purchase_time
        : null;
      this.houseList.loan_balance = this.houseList.loan_balance
        ? this.houseList.loan_balance
        : null;
      this.houseList.evaluation_price = this.houseList.evaluation_price
        ? this.houseList.evaluation_price
        : null;
      addAssetDetail(this.houseList).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getAssetDetail(this.curId);
          this.isHouseEdit = -1;
          this.isShowHouse = false;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    // 编辑车产信息
    editAutoInfo(index) {
      this.getBankList();
      this.isAutoEdit = index;
      const autoList = this.autoList[index];
      this.qCList.id = autoList.id;
      this.qCList.brand = autoList.brand;
      this.qCList.model = autoList.model;
      this.qCList.purchase_time = autoList.purchase_time;
      this.qCList.mortgage_status = autoList.mortgage_status;
      this.qCList.loan_balance = autoList.loan_balance;
      this.qCList.mortgage_bank = autoList.mortgage_bank;
      this.qCList.memo = autoList.memo;
      this.qCList.customer = autoList.customer;
    },
    // 取消编辑车产信息
    cancelEditAutoinfo() {
      this.isAutoEdit = -1;
      this.getAutoDetail(this.curId);
    },
    // 确定编辑车产信息
    handleAutoBtn() {
      editAutoDetail(this.qCList).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getAutoDetail(this.curId);
          this.isAutoEdit = -1;
          this.isShowAuto = false;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    //
    addAutoInfo() {
      this.clearInfo();
      this.getBankList();
      this.qCList.customer = this.curId;
      this.isShowAuto = true;
    },
    // 取消添加车产信息
    canAutoInfo() {
      this.isShowAuto = false;
      Object.assign(this.$data.qCList, this.$options.data().qCList);
    },
    // 确定添加车产信息
    subAutoInfo() {
      this.qCList.loan_balance = this.qCList.loan_balance
        ? this.qCList.loan_balance
        : null;
      addAutoDetail(this.qCList).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getAutoDetail(this.curId);
          this.isAutoEdit = -1;
          this.isShowAuto = false;
        } else {
          this.$message.error("操作失败: " + res.message);
        }
      });
    },
    // 删除车产信息
    async delAutoInfo(index) {
      await this.$confirm("确认要删除当前信息?", "温馨提示", {
        type: "warning"
      });
      await delAutoDetail(index.id)
        .then((res) => {
          this.getAutoDetail(this.curId);
          this.$message.success("删除成功");
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 清空房产 车产信息
    clearInfo() {
      this.houseList = {
        address: "",
        area: "",
        property_owner: "",
        property_owner_relation: "",
        purchase_time: "",
        mortgage_status: "",
        loan_balance: "",
        evaluation_price: "",
        mortgage_bank: ""
      };
      this.qCList = {
        brand: "",
        model: "",
        purchase_time: "",
        mortgage_status: "",
        memo: "",
        mortgage_bank: "",
        loan_balance: ""
      };
    }
  }
};
</script>
<style lang="scss" scoped >
// hua块
.bar {
  height: 36px;
  width: 96px;
  line-height: 36px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500 !important ;
  color: #212529 !important ;
  background: #fff;
  box-shadow: 0px 2px 6px 0px #c5c5c5;
  position: absolute;
  top: 4px;
  left: var(--left);
  z-index: 999999;
  text-align: center;
}
.no_data {
  text-align: center;
  margin-top: 200px;
}

.info_btns {
  display: flex;
  height: 40px;
  padding-top: 8px;
  margin-right: 6px;
  align-items: center;
  justify-content: space-between;
}
.btn_style {
  .svg-icon {
    font-size: 18px;
    font-weight: 700;
    margin-right: 6px;
    cursor: pointer;
  }
}
.detail {
  .user_info {
    .top {
      display: flex;
      padding: 12px 0;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        .photo {
          width: 50px;
          height: 50px;
        }
        .user_name {
          font-size: 20px;
          font-weight: 600;
          padding: 0 10px;
          color: rgba(0, 0, 0, 0.9);
        }
        .r_photo{
          display: flex;
          align-items: center;
        }
        .type_style{
          padding-left: 10px;
          border-left: 2px solid #c5c5c5;
          font-size: 14px;
        }
      }
    }
    .bottom {
      display: flex;
      height: 62px;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin-bottom: 16px;
      .b_title {
        color: rgba(0, 0, 0, 0.4);
      }
      .b_info {
        color: rgba(0, 0, 0, 0.9);
        padding: 8px 0;
      }
    }
  }
  ::v-deep .el-drawer__body {
    padding: 0 24px !important;
  }
  ::v-deep .el-drawer__header {
    height: 48px;
    line-height: 48px;
    font-weight: 550;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
    margin: 0;
    padding: 0 24px;
    border-bottom: 1px solid #dcdcdc;
  }
  .el-icon-edit,
  .el-icon-check,
  .el-icon-close,
  .el-icon-delete {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
    color: #000;
  }
  .el-icon-check {
    margin: 0 8px;
  }
  .el-timeline {
    padding: 24px 12px 0;
    max-height: calc(100vh - 284px);
    overflow-y: auto;
  }
  .el-timeline-item__timestamp.is-top {
    color: #333333;
    font-size: 14px;
    font-weight: 550;
  }
  ::v-deep .el-timeline-item__node--primary {
    border: 2px solid #623edf;
    background: #fff;
  }
}
// 查看详情
.detail {
  .user_content {
    position: relative;
    .cus_tabar{
      width: 600px;
      height: 44px;
      padding: 0 4px;
     background: #F3F3F3;
      display: flex;
      border-radius: 3px;
      align-items: center;
      justify-content: space-around;
      .tabar_info{
        width: 96px;
        height: 36px;
        font-weight: 500 !important;
        color: #212529 !important;
        font-size: 14px;
        cursor: pointer;
        text-align: center;
        line-height: 36px;
      }
    }
  }
  ::v-deep .el-tabs__header {
    padding: 2px 0 2px 8px !important;
    position: relative;
    width: 593px;
    border-radius: 3px;
    background: rgb(238, 238, 238);
  }
  ::v-deep .scp_style .el-tabs__header {
    width: 100% !important;
    background: #fff !important;
    padding-left: 25px !important;
  }
}
.name-style {
  margin-top: 6px;
  border-collapse: collapse;
  margin-right: 3px;
  font-size: 12px;
  td {
    height: 34px;
    line-height: 34px;
    padding: 0 12px;
    font-size: 14px;
    color: #333333;
    border: 1px solid #dcdcdc;
  }

  .name-title {
    text-align: right;
    width: 182px !important;
    background: rgba(73, 88, 210, 0.1);
    color: rgba(0, 0, 0, 0.4);
    font-weight: 500;
  }
  .name-info {
    width: 220px !important;
    .el-date-editor.el-input {
      width: 140px !important;
    }
    .el-input--prefix .el-input__inner {
      padding-right: 0 !important;
    }
  }
}
.title {
  margin-bottom: 5px;
  font-weight: 550;
}
.info {
  margin-bottom: 10px;
  max-height: calc(100vh - 310px);
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 6px;
}
// 贷款流程
.dk_process {
  border-radius: 4px;
  color: #212529;
  span {
    color: #13ce66;
    padding-right: 6px;
    font-size: 12px;
  }
  .pro_info {
    margin-top: 6px;
    font-size: 12px;
  }
}
// 通话记录
.call_style {
  overflow-y: auto;
  margin-top: 24px;
  height: calc(100vh - 270px);
}
// 附件
.pro_fj {
  text-align: center;
  .upload_demo {
    ::v-deep .el-upload-dragger {
      width: 945px !important;
      margin-top: 8px;
      // border: none;
    }
  }
  .fj_table {
    margin-top: 20px;
    .fj_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
  }
  .fj_table_1 {
    max-height: calc(100vh - 465px);
    overflow-y: auto;
  }
  .el-upload__text {
    font-size: 12px;
  }
}

/*滚动条样式*/
.detail ::-webkit-scrollbar {
  width: 4px !important;
}
.detail ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

// 滑块
// donghua
.info_title {
  font-size: 14px;
  font-weight: 550;
  padding-left: 6px;
  border-left: 4px solid #623edf
}

</style>
